<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-card title="关联问题项">
      <text class="mt-2 mb-4 block text-red-500">
        {{ data.desc }}
      </text>
      <uni-file-picker
        file-mediatype="image"
        v-model="data.showImg"
        mode="grid"
        disabled
      ></uni-file-picker>
    </uni-card>
    <uni-card title="执行信息">
      <text class="mt-2 mb-4 block text-red-500">
        {{ data.execDesc }}
      </text>
      <view v-if="showImgOrRectifyDesc">
        <uni-file-picker
          file-mediatype="image"
          v-model="data.execImg"
          @select="upload"
          mode="grid"
          :disabled="isEdit"
        ></uni-file-picker>
      </view>
      <view v-else>
        <uni-easyinput
          type="textarea"
          v-model="data.rectifyDesc"
          :disabled="isEdit"
        />
      </view>
    </uni-card>
    <button
      @click="submitForm"
      class="mb-10 w-2/3 rounded-xl"
      style="background-color: #5199ff"
      v-show="!isEdit"
    >
      提交
    </button>
  </scroll-view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getTaskDetail } from '@/services/review';
import type {
  ResponseWorksData,
  ResponseTaskDetailData,
} from '@/services/types/review';
import { defineProps } from 'vue';
import { convertToArray, convertToString } from '@/utils/utils';
import { uploadImg } from '@/utils/http';
import { submitTaskItem } from '@/services/write';
import type { SubmitTaskItem } from '@/services/types/write';
// 获取携带的参数
const props = defineProps(['item']);
const worksData = JSON.parse(
  decodeURIComponent(props.item),
) as ResponseWorksData;
//数据初始化
const data = ref({
  // 问题描述
  desc: '',
  // 问题图片
  showImg: [] as { url: string; extname: string; name: string }[],
  // 执行信息描述
  execDesc: '',
  // 执行信息图片
  execImg: [] as { url: string; extname: string; name: string }[],
  // 整改信息
  rectifyDesc: '',
});
// 是否可编辑
const isEdit = ref(false);
// 展示图片或者整改信息
const showImgOrRectifyDesc = ref(false);
// 页面数据初始化
let infoData = ref<ResponseTaskDetailData>();
// 页面加载完成
onLoad(async () => {
  const taskInfoData = await taskInfo();
  infoData.value = taskInfoData;
  initData();
});
//根据id获取任务信息
const taskInfo = async () => {
  const res = await getTaskDetail(worksData.id!);
  return res.data;
};
// 初始化数据赋值函数
const initData = () => {
  // 问题描述赋值
  data.value.desc = infoData.value!.problemList[0].chanceArray![0].chanceName!;
  // 问题图片赋值
  data.value.showImg = [];
  infoData.value!.problemList[0].descImgArr!.forEach((item) => {
    data.value.showImg.push({
      url: item.imgUrl!,
      extname: 'jpg',
      name: item.id,
    });
  });
  // 执行信息描述赋值
  data.value.execDesc = infoData.value!.operatorDataList[0].operateName!;

  // 执行信息图片赋值 查看
  if (worksData.workStatus !== 1) {
    if (infoData.value!.operatorDataList[0].callbackType === 3) {
      data.value.execImg = [];
      data.value.execImg = convertToArray(
        infoData.value!.operatorDataList[0].imgUrl!,
      );
      showImgOrRectifyDesc.value = true;
    } else {
      // 整改信息赋值
      data.value.rectifyDesc =
        infoData.value!.operatorDataList[0].operateItemValue!;
    }
    isEdit.value = true;
  } else {
    // 上传
    if (infoData.value!.operatorDataList[0].callbackType === 3) {
      showImgOrRectifyDesc.value = true;
    }
  }
};
// 上传图片
const upload = (e: UniHelper.PickerInstance) => {
  uploadImg(e).then((res) => {
    data.value.execImg.push({
      url: res.url,
      extname: 'jpg',
      name: res.key,
    });
  });
};
// 提交
const submitForm = () => {
  const submitData: SubmitTaskItem = {
    id: infoData.value!.id,
    operateItemType: '1',
    operatorDataList: [
      {
        dataOptionInList: [],
        formId: 0,
        formName: '',
        id: infoData.value!.operatorDataList[0].id,
        imgUrl: convertToString(data.value.execImg),
        operateItemValue: data.value.rectifyDesc,
        operateName: infoData.value!.operatorDataList[0].operateName,
        reportId: 0,
      },
    ],
  };

  uni.showModal({
    title: '确认提交？',
    content: '提交后将无法修改，请确认是否提交',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if (confirm) {
        submitTaskItem(submitData).then((res) => {
          if (res.msg === 'success') {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 1000,
            });
            // 页面跳转
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/myReview/myReview',
              });
            }, 1000);
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'error',
              duration: 2000,
            });
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/myReview/myReview',
              });
            }, 2000);
          }
        });
      }
    },
  });
};
</script>

<style lang="scss" scoped></style>
